<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Model</title>
<meta name="description" content="">
<meta name="keywords" content="">
<style type="text/css">
.model-bcak { 
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0; 
  background-color: rgba(0,0,0,.3); 
  display: flex;
  justify-content: center;
  align-items: center; 
}

.model {
 background: #fff;
}
.btn-class { 
  padding: 20px;
  margin-top: -20px;
  border: none;
  font-size: 20px;
  cursor: pointer; 
  font-weight: bold; 
  background: transparent;

  
}
.model-header, .model-footer,.model-body { 
  padding: 0 10px; 
  display: flex; 
  border: 1px solid #eee;
}  
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}

/*注册弹框的样式*/
p,input{margin: 0;padding:0;}
#regester{
  position: fixed;
  z-index: 9998;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .7);
}

.page {
  width:300px;
  height: 350px;
  background: #fff;
  z-index: 9999;
  padding: 10px 20px;
  cursor: pointer;
}
.lf{  float: left;}
.rg{ float: right; }
@font-face {font-family: "iconfont";
  src: url('font/iconfont.eot'); 
  src: url('font/iconfont.eot#iefix') format('embedded-opentype'), 
  url('font/iconfont.woff') format('woff'), 
  url('font/iconfont.ttf') format('truetype'), 
  url('font/iconfont.svg#iconfont') format('svg'); 
}
 .iconfont {
  font-family:"iconfont" !important;
  font-size:25px;
  font-style:normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;
}
.labelspan{
  width: 150px;
  line-height: 30px;
  font-size: 20px;
  justify-content: center;
  display: flex;
  color: #666;

}
#register-user p{
height: 40px;
border-radius: 5px;
border: 1px #eee solid;
margin: 20px 0;
}
#register-user p span{
  line-height: 37px;
  width: 40px;
  text-align: center;
  background: #eee;
  display: inline-block;

}
.x{
  width: 100%;
  height: 30px;
  font-size: 20px;
  color: #eee;
  text-align: right;
}
.enter{
  width: 240px;
  border: none;
  padding-left: 10px;
  line-height: 30px;
  font-size: 14px;
  outline: none;
}
.registerUser{ 
  font-size: 12px;
  padding: 15px;
}
.registerUser1{ 
  font-size: 12px;
  padding: 15px;
  text-align: right;
}
.dobutton{
  width: 300px;
  line-height: 38px;
  font-size: 18px;
  color: #fff;
  text-align: center;
  background: #00cc99;
  outline: none;
  border: none;
  margin-top: 10px ;
  cursor: pointer;
}
.active{ border-bottom: 2px #00cc99 solid; }

</style>
</head>
<body>
  <div id='app'>
    <button @click='showModel' class='button'>打开 Model 弹窗</button>
    <model-vue v-show='isModelVisible' @click='hide'>
      <!--
      这是一个弹框组件，我们利用了 slot 插槽，我们可以给 slot 里面写入任何内容动态的生成不同的弹框组件；
      为了更好的看到效果，我们假设生成一个注册登录弹框；
      弹框内容我们可以随便写
      利用到的知识点：
      1. solt
      2. 子组件改变父组件状态 $emit 事件
      3. transitions 动画
      4. 复用了 input 元素，用 key 管理可复用的元素
    -->
      <div slot='header'>
        <p class='x' @click='hide'>X</p>
        <span class='lf labelspan doregister' 
              :class='{active:isActive}' @click='doregister'>登陆</span>
        <span class=' labelspan dologin' 
            :class='{active:!isActive}' @click='doregister'>注册</span>
      </div>
      <div slot='body'>
        <div id='register-user'>
              <p>
                <span><i class="icon iconfont">&#xe675;</i></span>
                <input type='text' placeholder='请输入账号' class='enter' autofocus/>
              </p>
              <p>
                <span><i class="icon iconfont">&#xe618;</i></span>
                <input type='password' placeholder='请输入密码' class='enter'/>
              </p>
              <div class=registerUser v-if='isActive'>
                <input type='checkbox'/>下次自动登陆
                <span class='rg'>忘记密码?</span>
              </div>
            </div>
      </div>
      <div slot='footer'>
        <button class='dobutton' v-if='isActive'> 登陆</button>
        <button class='dobutton' v-else> 注册</button>
        <p class='registerUser1' v-if='isActive'>免费注册</p>
        <p class='registerUser1' v-else>去登陆</p>
      </div>
    </model-vue>
  </div>
    <script type="text/javascript" src='js/vue.min.js'></script>
    <script type="text/javascript">
      new Vue({
        el:'#app',
        data:{
          isModelVisible:false,
          isActive: false
        },
        methods:{
          showModel(){
            this.isModelVisible=true;
          },
          hide(){
            this.isModelVisible=false;
          },
          doregister(){
            this.isActive=!this.isActive;
          }
        },
        components:{
          'model-vue':{
            template:`
              <transition name="fade">
                <div class='model-bcak'>
                  <div class='model'>
                    <div class='model-header'>
                      <slot name='header'>
                        <h2>这是 Model 弹框的标题</h2>
                        <p class='btn-class' @click='hide'>X</p>
                      </slot>
                    </div>
                    <div class="model-body">
                      <slot name="body">
                        这是Modal弹框的主体
                      </slot>
                    </div>
                    <div class="model-footer">
                      <slot name="footer">
                        这是Modal弹框的脚部
                      </slot> 
                    </div>
                  </div>
                </div>   
              </transition>
            `,
          data(){
            return{}
          },
          methods:{
            hide(){
              this.$emit('click');
            }
          }
        }
        }
      })
    </script>
</body>
</html>